<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="手机：">
        <div v-text="form.mobile"></div>
      </el-form-item>
      <el-form-item label="跟踪号：">
        <div v-text="form.bizTraceId"></div>
      </el-form-item>
      <el-form-item label="平台类型：">
        <div v-text="form.platformName"></div>
      </el-form-item>
      <el-form-item label="系统名称：">
        <div v-text="form.osName"></div>
      </el-form-item>
      <el-form-item label="浏览器：">
        <div v-text="form.browserName"></div>
      </el-form-item>
      <el-form-item label="访问实例：">
        <div v-text="form.targetServer"></div>
      </el-form-item>
      <el-form-item label="业务流水号：">
        <div v-text="form.bizNumber"></div>
      </el-form-item>
      <el-form-item label="业务类型：">
        <div v-text="form.bizType"></div>
      </el-form-item>
      <el-form-item label="操作类型：">
        <div v-text="form.operateType"></div>
      </el-form-item>
      <el-form-item label="操作名称：">
        <div v-text="form.operateName"></div>
      </el-form-item>
      <el-form-item label="操作描述：">
        <div v-text="form.operateDesc"></div>
      </el-form-item>
      <el-form-item label="请求时间：">
        <div v-text="form.requestTime"></div>
      </el-form-item>
      <el-form-item label="执行时间（ms）：">
        <div v-text="form.executeTime"></div>
      </el-form-item>
      <el-form-item label="请求体：">
        <el-input
            size="small"
            v-model="form.requestBody"
            type="textarea"
            :autosize="{ minRows: 20, maxRows: 100 }"
            readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="响应体：">
        <el-input
            size="small"
            v-model="form.responseBody"
            type="textarea"
            :autosize="{ minRows: 20, maxRows: 100 }"
            readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="IP：">
        <div v-text="form.ip"></div>
      </el-form-item>
      <el-form-item label="所在省份：">
        <div v-text="form.province"></div>
      </el-form-item>
      <el-form-item label="所在城市：">
        <div v-text="form.city"></div>
      </el-form-item>
      <el-form-item label="备注：">
        <div v-text="form.remark"></div>
      </el-form-item>
      <el-form-item label="创建时间：">
        <div v-text="form.createdTime"></div>
      </el-form-item>
      <el-form-item label="更新时间：">
        <div v-text="form.modifiedTime"></div>
      </el-form-item>

      <el-form-item>
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {operationLogDetailApi} from "../../api/log/operationLog";

export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    // 编辑操作
    getDetail(id) {
      operationLogDetailApi({id}).then((res) => {
        this.form = res?.bizData;
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/operation/log/page",
      });
    },
  },
  created() {
    const {id} = this.$route.query;
    this.getDetail(id);
  },
};
</script>
